<template>
  <div class="homework-detail-container">
    <div class="homework-detail-title">
      {{item.topic}}
    </div>
    <div class="homework-detail-subtitle">
      作业说明:
    </div>
    <el-input maxlength="1024" :disabled="!idEditing" style="font-size: 24px; margin-top: 20px" :autosize="{ minRows: 8, maxRows: 8}" v-model="item.content" type="textarea" />
    <el-row style="margin-top: 20px">
      <el-col :span="4" v-if="role == 'teacher'">
        <el-button v-if="!idEditing" type="danger" size="small" @click="()=>{this.idEditing = true}">
          修改描述
        </el-button>
        <el-button v-else type="danger" size="small" @click="saveDesc">
          确认修改
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-upload
          v-if="role == 'teacher'"
          ref="teacherUpload"
          :limit="1"
          :auto-upload="false"
          :http-request="teacherSubmitUpload"
          action=""
        >
          <el-button slot="trigger" size="small" type="primary">选取附件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="()=>{this.$refs.teacherUpload.submit();}">提交附件</el-button>
        </el-upload>
        <el-upload
          v-if="role == 'student'"
          ref="studentUpload"
          :limit="1"
          :auto-upload="false"
          :http-request="studentSubmitUpload"
          action=""
        >
          <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="()=>{this.$refs.studentUpload.submit();}">提交作业</el-button>
        </el-upload>
      </el-col>
      <el-col :span="4">
        <el-button type="info" size="small" @click="checkSubmitDetail">查看提交信息</el-button>
      </el-col>
    </el-row>
    <div class="homework-detail-subtitle">
      作业附件:
    </div>
    <div class="homework-detail-attachfile-list">
      <div v-for="(item, index) in attachFileList" class="homework-detail-attachfile-item">
        <a :href="host+'/homework/file/attach/download?id='+item.id" style="margin-right: 3px">
          <i class="el-icon-download"/>
        </a>
        <div v-if="role=='teacher'" style="margin-right: 3px; cursor: pointer"  @click="deleteOneAttachFile(item.id, index)">
          <i class="el-icon-delete"/>
        </div>
        <a :href="host+'/homework/file/attach/download?id='+item.id" class="download-filename" style="color: #20a0ff">
          {{item.filename}}
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    deleteOneHomeworkAttachfile,
    getHomeworkAttachFileListByHid,
    getOneHomework, updateOneHomework,
    uploadHomeworkAttachFile, uploadHomeworkSubmitFile,
  } from "../../api";
  import {HOST, ROLE_KEY, UID_KEY} from "../../constants";

export default {
  name: 'HomeworkDetail',
  data() {
    return {
      role: null,
      idEditing: false,
      host: HOST,
      item: {

      },
      attachFileList: []
    }
  },
  methods: {
    teacherSubmitUpload({file}) {
      let formData = new FormData();
      const type = this.type;
      console.log(file)
      formData.append("file", file);
      formData.append("hid", this.$route.params.id)
      uploadHomeworkAttachFile(formData).then(res => {
        this.$message.success("上传成功")
        this.$refs.teacherUpload.clearFiles();
      })
    },
    studentSubmitUpload({file}) {
      let formData = new FormData();
      const type = this.type;
      console.log(file);
      formData.append("file", file);
      formData.append("hid", this.$route.params.id)
      formData.append("sid", localStorage.getItem(UID_KEY))
      uploadHomeworkSubmitFile(formData).then(res => {
        this.$message.success("上传成功")
        this.$refs.studentUpload.clearFiles();
      })
    },
    deleteOneAttachFile(id, index) {
      deleteOneHomeworkAttachfile({id}).then(res => {
        this.$message.success("删除成功")
        this.attachFileList.splice(index, 1);
      })
    },
    saveDesc() {
      this.idEditing = false
      updateOneHomework({
        id: this.$route.params.id,
        desc: this.item.content
      }).then(res => {
        this.$message.success("修改成功")
      })
    },
    checkSubmitDetail() {
      this.$router.push({ path: '/homework/submit/' + this.$route.params.id })
    }
  },
  mounted() {
    this.role = localStorage.getItem(ROLE_KEY)
    getOneHomework({id: this.$route.params.id}).then(res => {
      this.item = res.data
    })
    getHomeworkAttachFileListByHid({hid: this.$route.params.id}).then(res => {
      this.attachFileList = res.data
    })
  }
}
</script>

<style lang="scss" scoped>
.homework-detail {
  &-container {
    margin: 30px;
  }
  &-title {
    font-size: 30px;
    line-height: 46px;
  }
  &-subtitle {
    font-size: 24px;
    margin-top: 25px;
  }
  &-attachfile-list {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }
  &-attachfile-item {
    display: flex;
    margin-bottom: 10px;
    margin-right: 15px;
  }
}
.edit-btn {
}
</style>
